<template>
  <div class="h-full">

    <div class="h-full flex">
      <Sider breakpoint="md" collapsible :collapsed-width="0">
        <Menu active-name="1-1" theme="dark" width="auto">
          <MenuItem :name="`${menuList.order}`" v-for="menuList in sider" :key="`${menuList.order}`">
            <Icon type="ios-navigate"></Icon>
            <router-link :to="{name:`${menuList.pathName}`}">{{ menuList.name }}</router-link>
          </MenuItem>
        </Menu>
        <div slot="trigger"></div>
      </Sider>
    <div >
      <router-view></router-view>
    </div>
    </div>
  </div>
</template>
<script>
export default {
    name: 'attendanceManagement',
    components: {
    },
    data() {
        return {
            sider: [
                { name: '出勤管理', pathName: 'participation', order: '1-1' },
                { name: '请假管理', pathName: 'takeOff', order: '1-2' },
            ]
        }
    },
}
</script>
<style scoped></style>